<template>
    <div class="activityItem">
        <div class="flex flex-align-center">
            <span class="activity-status apply-num">
                {{activityData.parent.type}}
            </span>
            <div class="title">
                {{activityData.title}}
            </div>
        </div>
        <div class="flex flex-space-between">
            <div class="ml10 contents">
                {{activityData.contents}}
            </div>
        </div>
        <div class="flex-space-between">
            <span>
                联系人：
                <i class="tips">{{activityData.contactName}}</i>
            </span>
            <div>
                <span>联系电话：<a :href="'tel:'+activityData.contactMobile" class="orange">{{activityData.contactMobile}}</a></span>
            </div>
        </div>
        <div class="bottom">
            <span>联系地址：</span>
            {{activityData.contactAddress}}
        </div>
        <div v-if="!activityData.comments" class="flex flex-end action">
            <button class="comment" @click="$emit('click', activityData.id)">我要评价</button>
        </div>
        <div v-else>
            <div class="flex">
                <div>
                    <span v-if="activityData.comments.type === 0" class="type type0">点赞</span>
                    <span v-else class="type type1">投诉</span>
                </div>
                <div>{{activityData.comments.contents}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            activityData:{}
        },
        computed: {
        },
        methods: {
            goDetail(){
                this.$router.push(`/voluteerActivityDetail/${this.activityData.activityId}`)
            }
        },
    }
</script>

<style scoped lang='scss'>
    .activityItem{background: #EFEFEF;border-radius: .1rem;color: #888888;margin-bottom: .14rem;
        padding: .33rem .27rem 0.1rem;
    }
    .contents {
        font-size: 14px;
    }
    .activity-status{
        min-width: 40px;
        border-radius: .16rem;
        color: #fff;
        text-align: center;
        line-height: .32rem;
        padding: 0 .2rem;
        margin-right: .32rem;
    }
    .title{color: #393939;
        font-size: 15px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tips{
        color: #393939;
        font-style: normal;
    }
    .text-muted {
        color:#888888;
    }
    .activityItem{font-size: 12px;
        &>div{margin-bottom: .2rem;;}
    }
    .apply-num{
        border: solid 1px #F65D5D;color: #F65D5D;border-radius: 0.32rem;
        padding:  2px 4px;
    }
    .type {
        border-radius: 0.32rem;
        padding:  2px 6px;
        color: #FFF;
        margin-right:0.2rem;
    }
    .type0 {
        background: #F3A841;
    }
    .type1 {
        background: #5C97E9;
    }
    .orange {
        color: #F65D5D;
    }
    .bottom {
        padding-bottom: .3rem;
        border-bottom:1px solid #CCC;
    }
    .action {
        .comment {
            border:0;
            border-radius: 25px;
            background: #4D8FE8;
            color:#FFF;
            padding: 5px 10px;
        }
    }
</style>
